<template>
    <ph-flex class="ph-list" dir="col">
        <action-bar v-if="title" class="ph-list-topbar">
            {{title}}
        </action-bar>
        <ul class="ph-list-content">
            <slot></slot>
        </ul>
        <action-bar class="ph-list-footbar" :mini="miniFootbar" v-if="footbar">
            <slot name="footbar"></slot>
        </action-bar>
    </ph-flex>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent, provide, toRef } from 'vue'
import { PhFlex} from '../base'
export default defineComponent({
    props:["title","footbar","miniFootbar","align"],
    setup(props){
        provide("align",toRef(props,'align'))
    },
    components:{
        PhFlex,
        ActionBar:defineAsyncComponent(()=>import('../base/action-bar.vue'))
        }
})
</script>
<style lang="scss">
.ph-list{
    border: 1px solid var(--ph-bd-light);
    border-radius: 5px;
    overflow:hidden;
    margin-bottom: var(--ph-20);
    color:var(--ph-c);
    overflow: auto;
    min-width: 100%;
    width:auto;
    font-size:var(--phx);
    .ph-list-topbar{
        border-bottom: 1px solid var(--ph-bd-light);
        color: var(--ph-c-d1);
        background-color: var(--ph-light-l1);
        justify-content: flex-start;
        border-top:none;
        border-left:none;
        border-right:none;
    }
    .ph-list-footbar{
        justify-content: flex-end;
        border-bottom:none;
        border-left:none;
        border-right:none;
    }
    &-content{
        line-height:inherit;
        overflow:auto;
        color: var(--ph-c);
        min-width: 100%;
    }
}
</style>
